<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线工具箱-图片处理--</title>
<!--    <link rel="apple-touch-icon" type="image/svg"  href="/favicon.svg">-->
<!--    <link rel="icon" type="image/svg" href="/favicon.svg">-->
<!--    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript">
        function  uploadfile() {
            var files = document.getElementById('inputfile').files; //files是文件选择框选择的文件对象数组
            if (files.length == 0) {
                alert("请选择文件");
                return;
            }
            var form = new FormData(),
                url = '/imageio/upload', //服务器上传地址
                file = files[0];
            form.append('file', file);
            form.append('format', document.getElementById('format').value);
            form.append('compression', document.getElementById('compression').value);
            form.append('scale', document.getElementById('scale').value);
            var xhr = new XMLHttpRequest();
            xhr.open("post", url, true);

            //上传进度事件
            xhr.upload.addEventListener("progress", function (result) {
                if (result.lengthComputable) {
                    //上传进度
                    var percent = (result.loaded / result.total * 100).toFixed(2);
                    console.log(percent);
                    // document.querySelector(".number").innerHTML = percent;
                }
            }, false);

            xhr.addEventListener("readystatechange", function () {
                var result = xhr;
                if (result.status != 200) { //error
                    alert("上传失败");
                    console.log('上传失败', result.status, result.statusText, result.response);
                } else if (result.readyState == 4) { //finished
                    // alert("上传成功");
                    console.log('上传成功', result);
                    console.log(result.response);
                    var jsondata = JSON.parse(result.response);
                    if (jsondata.code == 0) {
                        document.querySelector("#download").setAttribute("href", jsondata.data);
                        document.querySelector("#downloadimg").setAttribute("src", jsondata.data);
                        document.querySelector("#download").setAttribute("style", "display:block");
                    }else {
                        document.querySelector("#downloadimg").setAttribute("src", "");
                    }
                }
            });
            xhr.send(form);
        }
    </script>
</head>
<body>
<div class="container-md">
    <form id="form" method="post" action="/imageio/upload" enctype="multipart/form-data">
        <div class="row">
            <div class="col-12 mt-2 mb-1" align="center">
                <span style="font-size: x-large;" class="text-center"><strong>图片压缩/转码</strong></span><br />
                <span style="font-size: xx-small">格式选择不恰当，文件越来越大哦( ；´Д｀)</span>
            </div>
            <div class="form-group col-md-6 col-lg-3">
                <span class="form-text">图片格式：</span>
                <select id="format" name="format" class="form-select-button custom-select">
                    <option value="None" >保存原格式</option>
                    <option value="PNG">PNG</option>
                    <option value="JPG">JPG</option>
                    <option value="WEBP">WEBP</option>
                    <option value="BMP">BMP</option>
                </select>
            </div>
            <div class="form-group col-md-6 col-lg-3">
                <span class="form-text">图片质量</span>
                <select id="compression" name="compression" class="form-select-button custom-select">
                    <option value="1.0">原图质量</option>
                    <option value="1.2">画质增强</option>
                    <option value="0.8">原图80%</option>
                    <option value="0.6">原图60%</option>
                    <option value="0.4">原图40%</option>
                    <option value="0.2">原图20%</option>
                </select>
            </div>
            <div class="form-group col-md-6">
                <span class="form-text">等比例缩小</span>
                <select id="scale" name="scale" class="form-select-button custom-select">
                    <option value="1">原图尺寸</option>
                    <option value="0.75">原图75%</option>
                    <option value="0.5">原图50%</option>
                    <option value="0.25">原图25%</option>
                </select>
            </div>
            <div class="col-12">
                <div class="col-sm-12">
                    <input id="inputfile" name="file" type="file" data-show-caption="true">
                </div>
            </div>
            <div class="col-12">
            <input type="button" value="上传" httponclick="uploadfile()" >
                <input type="submit" value="ok">
            </div>
        </div>
        <div class="col-12 mt-2 text-center">
            <a id="download">下载</a>
            <img  id="downloadimg" src="" >
        </div>
    </form>
</div>
</body>
</html>
